// 股票信息
<template>
  <div>
    <div class="display-flex" :data-currentTime="currentTime">
      <div class="flex-1">
        <n-grid
          :cols="6"
          class="z9 fz14 details-top"
          :class="datas.f43 - datas.f60 >= 0 ? 'red' : 'ls'"
        >
          <n-gi>
            <div>股票名称：{{ datas.f58 }}</div>
            <div>均价：{{ datas.f71 }}</div>
            <div>
              今日成交金额：<span>{{ proxy.$MU(datas.f48) }}</span>
            </div>
          </n-gi>
          <n-gi>
            <div>
              当前价格：<span>{{ datas.f43 }}</span>

              <span class="ml10 fz12">
                {{
                  proxy.$toFixed(((datas.f43 - datas.f60) / datas.f60) * 100)
                }} </span
              >%

              <span class="fz12">
                ({{ proxy.$toFixed(datas.f43 - datas.f60) }} )
              </span>
            </div>
            <div>量比：{{ datas.f50 }}</div>
            <div>
              总股本：<span>{{ proxy.$MU(datas.f84) }}</span>
            </div>
          </n-gi>
          <n-gi>
            <div>今开：{{ datas.f46 }}</div>
            <div>
              换手率：
              <span>{{ proxy.$toFixed((datas.f48 / datas.f117) * 100) }}</span
              >%
            </div>
            <div>
              每股净资产：<span>{{ proxy.$toFixed(datas.f92) }}</span>
            </div>
          </n-gi>
          <n-gi>
            <div>昨收：{{ datas.f60 }}</div>
            <div>涨停：{{ datas.f51 }}</div>
            <div>
              总值：<span>{{ proxy.$MU(datas.f116) }}</span>
            </div>
          </n-gi>
          <n-gi>
            <div>最高：{{ datas.f44 }}</div>
            <div class="ls">跌停：{{ datas.f52 }}</div>
            <div>
              流值：<span>{{ proxy.$MU(datas.f117) }}</span>
            </div>
          </n-gi>
          <n-gi>
            <div>最低：{{ datas.f45 }}</div>
            <div>
              总手：<span>{{ proxy.$AU(datas.f47) }}</span>
            </div>
          </n-gi>
        </n-grid>
      </div>
      <div>
        <n-button type="info" @click="showModal = true"> 股票诊断 </n-button>
         <n-button type="info" @click="hrefApp" class="ml20 href-App"> 跳转app </n-button>
        <n-button
          type="error"
          class="ml10"
          @click="JoinThe"
          :loading="loading"
          v-if="qu.observetype"
        >
          +加入观察区
        </n-button>
      </div>
    </div>
    <!-- <n-space vertical v-else>
      <n-skeleton height="55px" width="100%" />
    </n-space> -->

    <n-modal v-model:show="showModal" preset="card" class="dfsfdsrr">
      <template #header>
        <div>股票诊断</div>
      </template>
      <div>
        <iframe :src="'https://emrnweb.eastmoney.com/znzg/stockDiagnosis?stockCode='+codese" class="dfdssteer"></iframe>
      </div>
      <!-- <template #action>
        <div class="tr">
          <n-button type="info" ghost @click="showModal = false">
            取消
          </n-button>
          <n-button type="info" class="ml10" @click="showModal = false">
            确认
          </n-button>
        </div>
      </template> -->
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref, computed, getCurrentInstance } from "vue";
import { dxget, qurl, addGuanca } from "../../util/index";
import store from "../../store"; 
import stock from "../../store/stock"; 
import {getCodesder} from "../../util/index"
const { proxy } = getCurrentInstance();
let qu = qurl();
let datas = ref({
  f43: 0,
  f44: 0,
  f45: 0,
  f46: 0,
  f47: 0,
  f48: 0,
  f50: 0,
  f51: 0,
  f52: 0,
  f58: "",
  f60: 0,
  f71: 0,
  f84: 0,
  f92: 0,
  f116: 0,
  f117: 0,
});
let showModal = ref(false);
let loading = ref(false);
const props = defineProps({
  code: {
    type: String,
  },
});
let codese = getCodesder(props.code)
const emit = defineEmits(["getInfo"]);
const initData = async () => {
  let kjjhe: any = await dxget("gupiao/getJiage", {
    scode: props.code,
  });
  datas.value = kjjhe.data;
  stock.commit('setInfo',kjjhe.data)
  emit("getInfo", kjjhe.data);
};
const getColor = (data) => {
  return data >= 0 ? "red" : "ls";
};

const JoinThe = async () => {
  loading.value = true;
  let laiyuan = qu.ew;
  if (qu.observetype == "5" || qu.observetype == "6") {
    laiyuan = qu.Art_Code;
  }

  await addGuanca(props.code, qu.ew, {
    laiyuan: laiyuan,
    code: props.code,
    observetype: qu.observetype,
  });
  loading.value = false;
};
initData();
const currentTime = computed(() => {
  const newDate = new Date();
  const Hours = newDate.getHours();
  const myddy = newDate.getDay(); //获取存储当前日期
  /*每天的15点以后 和9点前 周六和周天 不刷新 */
  console.log(myddy);
  if (Hours > 15 || Hours < 8 || myddy == 6 || myddy == 0) {
    return;
  }
  initData();
  return store.state.currentTime;
});
const hrefApp = ()=>{
  window.location.href="dfcft://router/market/stock?anchorKey=STOCK_BAR&market=0&stockCode="+props.code
  // window.sendTrackLog('a', 'click', 'fx.dwss.android', "818"+props.code, "");
}
</script>
<style scoped>

.dfdssteer{
  border: 0;
  width: 100%;
  height:700px;
}
</style>
